<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>我的携程</title>
		<!-- 引入css -->
		<!-- normalize.css 功能和 之前的 base.css 类似。初始化的css -->
		<!-- 保留了部分有用的样式，去除了部分没有用的样式，让浏览器默认显示的样式一致 -->
		<link rel="stylesheet" href="./css/normalize.css" />
		<!-- 首页自己的css -->
		<link rel="stylesheet" href="./css/index.css" />
	</head>
	<body>
        
        <input type="text" placeholder="123">
		<div class="wrapper">
			<!-- 搜索 -->
			<div class="search_box">
				<input type="text" placeholder="占位符XXXXXXX" />
				<a href="#">
					<i class="icon"></i>
					我的
				</a>
			</div>
			<!-- focus -->
			<ul class="focus">
				<li>
					<a href="#"><img src="./upload/focus.jpg" /></a>
				</li>
			</ul>
			<!-- 导航一 -->
			<div class="top_nav">
				<!-- ul>li*5>a[href=#]{$$} -->
				<ul>
					<li>
						<a href="#">
							<div class="icon"></div>
							<span>景点·玩乐</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="icon"></div>
							<span>景点·玩乐</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="icon"></div>
							<span>景点·玩乐</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="icon"></div>
							<span>景点·玩乐</span>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="icon"></div>
							<span>景点·玩乐</span>
						</a>
					</li>
				</ul>
			</div>

			<!-- 主导航 -->
			<nav class="main_nav">
				<div class="nav_item">
					<div class="items">
						<a href="#">酒店</a>
					</div>
					<div class="items">
						<a href="#">海外酒店</a>
						<a href="#">特价酒店</a>
					</div>
					<div class="items">
						<a href="#">团购</a>
						<a href="#">民宿</a>
					</div>
				</div>
				<div class="nav_item">
					<div class="items">
						<a href="#">机票</a>
					</div>
					<div class="items">
						<a href="#">海外酒店</a>
						<a href="#">特价酒店</a>
					</div>
					<div class="items">
						<a href="#">团购</a>
						<a href="#">民宿</a>
					</div>
				</div>
				<div class="nav_item">
					<div class="items">
						<a href="#">旅游</a>
					</div>
					<div class="items">
						<a href="#">海外酒店</a>
						<a href="#">特价酒店</a>
					</div>
					<div class="items">
						<a href="#">团购</a>
						<a href="#">民宿</a>
					</div>
				</div>
			</nav>

      <!-- 生活服务 -->
      <div class="service">
        <!-- ul>li*10>a[href=#] -->
        <ul>
          <li>
            <a href="#">
              <em class="icon"></em>
              <span>WiFi电话卡</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="icon"></em>
              <span>WiFi电话卡</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="icon"></em>
              <span>WiFi电话卡</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="icon"></em>
              <span>WiFi电话卡</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="icon"></em>
              <span>WiFi电话卡</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="icon"></em>
              <span>WiFi电话卡</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="icon"></em>
              <span>WiFi电话卡</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="icon"></em>
              <span>WiFi电话卡</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="icon"></em>
              <span>WiFi电话卡</span>
            </a>
          </li>
          <li>
            <a href="#">
              <em class="icon"></em>
              <span>WiFi电话卡</span>
            </a>
          </li>
        </ul>
      </div>
		</div>
	</body>
</html>
